<template>
    <v-layout type="main">
        <el-form ref="form" :model="addForm" :rules="submitRules" label-width="120px" class="alick-add-form">
            <el-steps :active="active" v-if="active != 9" simple class="my-steps">
                <el-step title="基本信息" icon="el-icon-edit"></el-step>
                <el-step title="上传文件" icon="el-icon-upload"></el-step>
                <el-step title="完成" icon="el-icon-picture"></el-step>
            </el-steps>
            <h3 class="add-alike-title">基本信息</h3>
            <div v-if="active == 1 || active == 9">
                <el-form-item label="范围" prop="visibility">
                    <el-radio-group v-model="addForm.visibility">
                        <el-radio :label="0">私有的</el-radio>
                        <el-radio :label="1">共享的</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input type="text" v-model="addForm.name" />
                </el-form-item>
                <el-form-item label="挂载路径" prop="alias">
                    <el-input type="text" v-model="addForm.alias" />
                </el-form-item>
                <el-form-item label="描述" prop="desc">
                    <el-input type="textarea" :rows="3" v-model="addForm.desc" />
                </el-form-item>
                <el-form-item label="配图">
                    <media-uploader accept=".jpg,.jpeg,.png,.JPG,.JPEG" :src="addForm.avatar"
                        @avatarPath="avatarPath" />
                </el-form-item>
                <el-form-item label="标签类型" prop="labels">
                    <el-select v-model="addForm.labels" style="width:100%;" :popper-append-to-body="false"
                        popper-class="select-popper" placeholder="请选择">
                        <el-option v-for="item in labelDicts" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <h3 class="add-alike-title">版本信息</h3>
                <el-form-item label="版本" prop="version">
                    <el-input type="text" v-model="addForm.version" readonly />
                </el-form-item>
                <el-form-item label="提交信息" prop="commit_msg">
                    <el-input type="textarea" :rows="6" v-model="addForm.commit_msg" />
                </el-form-item>
            </div>
            <div v-if="active == 2">
                <el-form-item label="数据来源" prop="file_source">
                    <el-radio-group v-model="version.file_source"  v-if= "s3_flag" >
                        <el-radio :label="1">本地上传</el-radio>
                        <el-radio :label="2">S3接入</el-radio>
                    </el-radio-group>
                    <wrapUploader @succeedOver="succeedOver" type="model" :taskId="path" :biz_id="version.id"
                        v-if="version.file_source == 1" />
                    <div v-if="version.file_source == 2">
                        <el-form-item label="bucket名称" prop="file_source">
                            <el-select size="mini" v-model="version.s3_access_id">
                                <el-option v-for="item in s3Options" :value="item.id" :label="item.name" :key="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="S3路径" prop="file_source">
                            <el-input size="mini" v-model="version.s3_path" class="entrance" />
                        </el-form-item>
                    </div>
                </el-form-item>
            </div>
            <el-form-item label=" ">
                <el-button class="none-type" type="primary" @click="nextSubmit" v-if="active == 1">下一步</el-button>
                <el-button class="none-type" type="primary" @click="submitVersion" v-if="active == 2">确定</el-button>
                <el-button class="none-type" type="primary" @click="nextSubmit" v-if="active == 9">确定</el-button>
            </el-form-item>

        </el-form>

    </v-layout>
</template>
  
<script>
import { labelDicts, zipFormat, mediaFormat } from '@/utils/maps'
import { getAllAssetS3 } from '@/api/inout'
import { addModel, getModelDetail, putModel } from '@/api/model'
import { getMarketModelDetail } from '@/api/marketModel'
import { getExperimentDetail } from '@/api/notebook'
import { getPageFileList } from "@/api/file"
// import { uuid } from "@/utils/tool";
import {paramMap } from '@/utils/maps'
import { addModelVersion, putModelVersion, getAllModelVersions } from '@/api/modelversion'
export default {
    data() {
        return {
            s3_flag: paramMap['s3_flag'],
            addForm: {
                visibility: 0,
                type: '1',
                name: '',
                desc: '',
                alias: '',
                labels: '',
                version: 'v1'
            },
            model: {},
            version: {},
            submitRules: {
                name: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
                ],
                alias: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 5, max: 40, message: "长度在1到40个字符" },
                ],
                desc: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
                ],
                commit_msg: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 500, message: "长度在1到200个字符" },
                ],
            },
            labelDicts,
            showSelectDialog: false,
            active: 1,
            model_id: this.$route.query.model_id,
            experiment_id: this.$route.query.experiment_id,
            game_experiment_id: this.$route.query.game_experiment_id,
            market_model_id: this.$route.query.market_model_id,
            market_model_version_id: this.$route.query.market_model_version_id,
            showFile: false,
            defaultProps: {
                label: "name",
                children: [],
                isLeaf: "dir",
            },
            node: {},
            resolve: [],
            defaultCheckNode: [], //默认选中model文件夹和main.py 主文件
        };
    },
    async created() {
        this.getData()
        this.getS3()
    },
    methods: {
        async getData() {
            if (this.model_id) {
                let res = await getModelDetail({ id: this.model_id })
                this.active = 9
                let data = res.data
                this.addForm.name = data.name
                this.addForm.desc = data.desc
                this.addForm.alias = data.alias
                this.addForm.visibility = 0
                this.addForm.labels = data.labels
                this.addForm.version = 'v' + (data.version_index + 1)
            }
            else {
                if (this.market_model_id) {
                    let res = await getMarketModelDetail({ id: this.market_model_id })
                    this.active = 9
                    let data = res.data
                    this.addForm.name = data.name
                    this.addForm.desc = data.desc
                    this.addForm.alias = data.alias
                    this.addForm.visibility = 0
                    this.addForm.labels = data.labels
                    this.addForm.version = 'v1'
                }
                if (this.experiment_id) {
                    this.active = 9
                    let res = await getExperimentDetail({ id: this.experiment_id })
                    let data = res.data
                    this.addForm.name = data.name
                    this.addForm.desc = data.desc
                    this.addForm.alias = data.alias
                    this.addForm.visibility = 0
                    this.addForm.version = 'v1'
                }
            }
            if (this.$route.query.model_id) {
                this.showFile = true
                this.doloadNode();
            }
            this.$forceUpdate()
        },
        avatarPath(data) {
            this.addForm.avatar = data;
        },
        done() {
            this.showSelectDialog = false
            let query = { id: this.addForm.id }
            this.$router.push({
                path: '/modelGame/code',
                query
            })
        },
        nextSubmit() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    console.log("model_id", this.model_id)
                    if (this.model_id) {
                        console.log("putModel", this.model_id)
                        this.addForm.id = this.model_id
                        await putModel({ ...this.addForm });
                        if (this.market_model_version_id || this.experiment_id) {
                            let modelVersion = {}
                            modelVersion.model_id = this.addForm.id
                            modelVersion.version = this.addForm.version
                            if (this.market_model_version_id) {
                                modelVersion.fork_from = this.market_model_version_id
                            }
                            else {
                                modelVersion.fork_from = this.experiment_id
                            }
                            modelVersion.commit_msg = this.addForm.commitMsg
                            let ret2 = await addModelVersion(modelVersion)
                            modelVersion = ret2.data
                            let query = { id: this.addForm.id, source_version_id: modelVersion.id }
                            this.$router.push({
                                path: '/modelGame/code',
                                query
                            })
                        }
                    }
                    else {
                        if (this.market_model_version_id) {
                            this.addForm.fork_from = this.market_model_version_id
                        }
                        console.log("addModel", this.model_id)
                        let ret = await addModel({ ...this.addForm });
                        this.addForm = ret.data
                        let version_ret = await getAllModelVersions({ model_id: this.addForm.id })
                        this.versionOptions = version_ret.data
                        if (this.versionOptions.length > 0) {
                            this.version = this.versionOptions[0]
                        }
                        if (this.market_model_version_id) {
                            let query = { id: this.addForm.id }
                            this.$router.push({
                                path: '/modelGame/code',
                                query
                            })
                        }
                        else {
                            this.active = 2
                        }
                    }
                }
            })
        },
        async submitVersion() {
            let ret = await putModelVersion({ ...this.version })
            this.version = ret.data
            let query = { id: this.addForm.id }
            this.$router.push({
                path: '/modelGame/code',
                query
            })
        },
        async getS3() {
            let res = await getAllAssetS3()
            this.s3Options = res.data

        },
        fileSubmit() {

            let checkNodeList = this.$refs.tree.getCheckedNodes();
            if (checkNodeList.length > 0) {
                console.log(checkNodeList)
                this.showFile = false
            } else {
                this.$message({
                    message: "请至少勾选一个文件",
                    type: "warning",
                });
            }
            // this.showFile = false
        },
        doloadNode(node, resolve) {
            this.node = node;
            this.resolve = resolve;
            this.loadNode(this.node, this.resolve);
        },
        async loadNode() {
            if (this.node) {
                this.node.childNodes = [];
            } else {
                return
            }
            let myInfo = await this.$myInfo(this)
            let bizId = this.$route.query.experiment_id
            let relative_path = ''
            let paramters = {
                biz_id: this.$route.query.experiment_id,
                relative_path,
                type: 'workspace',
                user_id: myInfo.id,
                page_num: 1,
                page_size: 200,
            };
            if (this.node.level > 0) {
                paramters.relative_path = this.node.data.path.split(bizId)[1]
            }
            this.defaultCheckNode = this.$refs.tree.getCheckedKeys()
            let defaultFileList = await getPageFileList(paramters);
            this.defaultFileList = defaultFileList.data.list && defaultFileList.data.list;
            this.defaultFileList.map((item) => {
                return (item.dir = item.dir == true ? false : true);
            });
            if (this.defaultFileList) {
                return this.resolve(this.defaultFileList);
            }

        },
        handleClass({ dir, suffix }) {
            if (zipFormat[suffix]) return "zip";
            if (mediaFormat[suffix]) return mediaFormat[suffix]
            if (!dir) return "dir";
            return "text";
        },
        succeedOver(data) {
            console.log(data)
        },
    }
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-add.less";

.detail-layout {
    background: #FFF;
    padding-right: 20px;
}

.name-icon {
    padding-left: 28px;
    cursor: pointer;
    background: url(~@/assets/img/file-icon/text.png) no-repeat;
    background-size: 22px 22px;
    width: 100%;
    height: 22px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dir {
    background: url(~@/assets/img/file-icon/dir.png) no-repeat;
    background-size: 22px 22px;
}

.zip {
    background: url(~@/assets/img/file-icon/zip.png) no-repeat;
    background-size: 22px 22px;
}

.pic {
    background: url(~@/assets/img/file-icon/pic.png) no-repeat;
    background-size: 22px 22px;
}

.video {
    background: url(~@/assets/img/file-icon/video.png) no-repeat;
    background-size: 22px 22px;
}

.voice {
    background: url(~@/assets/img/file-icon/voice.png) no-repeat;
    background-size: 22px 22px;
}
</style>
